<template>
    <div class="component-select-box-a" :class="[ innerClass ]">
        <div class="select text-normal" @click="changeSelectOptionsVisible">
            <span class="time-box">商家筛选</span>
            <span class="icon">&#xe60b;</span>
        </div>
        <div class="options-box" v-if="selectOptionsVisible">
            <div class="inner">
                <div class="item after-line" @click="onClickOption(item)" v-for="(item, index) in checkOptions" :key="index">
                    <div class="name text-left">{{item.name}}</div>
                    <div class="icon-box">
                        <div class="icon color-blue" v-if="item.checked">&#xe61f;</div>
                        <div class="icon grey-color" v-else>&#xe61e;</div>
                    </div>
                </div>
            </div>
            <div class="btn btn-mobile btn-large btn-blue btn-block btn-rect" @click="sureOption">确认</div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';

@Component({
    name: 'Select',
})
export default class Select extends Vue {
    @Prop({ type: [ String, Array ], required: true}) public value: any;
    @Prop({ type: Array, required: true}) public options: any;
    @Prop({ type: String, default: ''}) public innerClass: any;

    public selectOptionsVisible = false;
    public currentValue: any = null;

    @Watch('$props.value')
    public onPropsValue() {
        this.currentValue = [ ...this.value ];
    }

    public get checkOptions() {
        if (Array.isArray(this.currentValue)) {
            return this.options.map((item: any, index: any) => {
                if (this.currentValue.indexOf(item.id) !== -1) {
                    return {
                        name: item.name,
                        id: item.id,
                        checked: true,
                    };
                }
                return {
                    name: item.name,
                    id: item.id,
                    checked: false,
                };
            });
        } else {
            return this.options.map((item: any, index: any) => {
                if (this.currentValue === item.id) {
                    return {
                        name: item.name,
                        id: item.id,
                        checked: true,
                    };
                }
                return {
                    name: item.name,
                    id: item.id,
                    checked: false,
                };
            });
        }
    }

    public onClickOption(option: any) {
        if (Array.isArray(this.currentValue)) {
            const index = this.currentValue.indexOf(option.id);
            if (index === -1) {
                this.currentValue.push(option.id);
            } else {
                this.currentValue.splice(index, 1);
            }
        } else {
            this.currentValue = option.id;
        }
    }

    public changeSelectOptionsVisible() {
        this.selectOptionsVisible = true;
    }

    public sureOption() {
        this.$emit('input', [ ...this.currentValue ]);
        this.selectOptionsVisible = false;
    }

    public created() {
        this.currentValue = [ ...this.value ];
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.component-select-box-a {
    position: relative;
    .select {
        .time-box {
            margin-right: 6rpx;
        }
        .icon {
            font-size: 14px;
            font-weight: bold;
            vertical-align: middle;
        }
    }
    .options-box {
        position: absolute;
        z-index: 2;
        top: 32 * 2 + 10rpx;
        left: 0;
        background-color: @white-color;
        border: 2rpx solid #BBBBBB;
        border-radius: 10rpx;
        .inner {
            box-sizing: border-box;
            width: 332px;
            max-height: 500rpx;
            padding: 0 16px;
            overflow-y: scroll;
            .item {
                display: flex;
                box-sizing: border-box;
                position: relative;
                box-sizing: border-box;
                width: 100%;
                height: 80rpx;
                line-height: 80rpx;
                text-align: center;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                .name {
                    width: 280px;
                }
            }
        }
        .btn {
            height: 38 *2rpx;
            padding: 0;
            line-height: 38 *2rpx;
        }
    }
}

</style>
